function hide(css) {
    var list = document.querySelectorAll(css);
    len = list.length;
    for (var i = 0; i < len; i++) {
        list[i].style.display = 'none';
    }
}

function display(css) {
    var list = document.querySelectorAll(css),
        len = list.length;
    for (var i = 0; i < len; i++) {
        list[i].style.display = 'block';
    }
}

function remove_class(css, cls) {
    var list = document.querySelectorAll(css),
        len = list.length;
    for (var i = 0; i < len; i++) {
        // list[i].className = list[i].className.replace(cls, '');
        list[i].classList.remove(cls);
    }
}


var login_select = document.querySelectorAll('.title span'),
    login_select_len = login_select.length,
    login_mode = ['.short_msg', '.password', '.qr-code'];
for (var i = 0; i < login_select_len; i++) {
    (function (j) {
        login_select[i].onclick = function () {
            for (var i = 0; i < login_select_len; i++) {
                remove_class('.title .selected', 'selected');
                hide(login_mode[i]);
            }
            this.classList.add('selected');
            display(login_mode[j]);
        }
    }(i))
}

var port = document.querySelector('.short_msg .form-item .port');
port.onclick = function () {
    display('.short_msg .form-item .mask');
    display('.short_msg .form-item .port-item');
}

var close = document.querySelector('.short_msg .form-item .close');
close.onclick = function () {
    hide('.short_msg .form-item .mask');
    hide('.short_msg .form-item .port-item');
}

var port_li = document.querySelectorAll('.short_msg .form-item li'),
    port_li_len = port_li.length;
for (var i = 0; i < port_li_len; i++) {
    port_li[i].onclick = function () {
        remove_class('.short_msg .form-item .selected', 'selected');
        this.classList.add('selected');
        port.innerHTML = this.lastChild.innerHTML;
        close.onclick();
    }
}

var login_mode1 = document.querySelectorAll('.switch img');
for (var i = 0, len = login_mode1.length; i < len; i++) {
    (function (j) {
        login_mode1[j].onclick = function () {
            for (var i = 0; i < len; i++) {
                display('.switch img');
            }
            hide(login_mode[0]);
            hide(login_mode[1]);
            hide(login_mode[2]);
            hide('.title');
            if (j == 1) {
                display('.title');
                login_select[1].onclick();
            }
            display(login_mode[login_mode.length - 1 - j]);
            this.style.display = 'none';
        }
    }(i))
}